<template>
  <div class="image-manage">
    <!-- 添加按钮和图片数控制 -->
    <div class="button-container" style="width: 100%">
      <div class="search-container" style="width: 70%">
        <el-input v-model="searchQuery" placeholder="搜索图片" class="search-input" style="width: 100%"></el-input>
      </div>
      <div>
        <el-button type="primary" @click="handleSearch" class="search-button">
          <i class="el-icon-search"></i> 搜索
        </el-button>
        <el-button type="primary" @click="dialogUploadVisible = true" class="custom-button">
          <i class="el-icon-upload"></i> 上传图片
        </el-button>
        <el-button type="text" @click="toggleView" class="custom-button">
          <i class="el-icon-folder"></i> 切换到{{ showRecycleBin ? '图片列表' : '回收站' }}
        </el-button>
      </div>
    </div>

    <el-upload
        class="upload-demo"
        action="/api/upload"
        :on-success="handleSuccess"
        :before-upload="beforeUpload"
        :limit="10"
        multiple
        :file-list="fileList"
        :on-remove="handleRemove"
        list-type="picture-card"
        style="display: none;">
      <i class="el-icon-plus"></i>
    </el-upload>

    <!-- 上传图片弹窗 -->
    <el-dialog title="上传图片" :visible.sync="dialogUploadVisible" width="30%">
      <el-upload
          ref="upload"
          action="/api/upload"
          :on-success="handleSuccess"
          :before-upload="beforeUpload"
          :limit="10"
          multiple
          :file-list="fileList"
          :on-remove="handleRemove"
          list-type="picture-card">
        <i class="el-icon-plus"></i>
      </el-upload>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogUploadVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitUpload">确 定</el-button>
      </span>
    </el-dialog>

    <div class="filter-container">
      <el-select v-model="filterType" placeholder="图片类型" @change="applyFilters">
        <el-option label="所有类型" value=""></el-option>
        <el-option label="JPEG" value="jpeg"></el-option>
        <el-option label="PNG" value="png"></el-option>
        <el-option label="GIF" value="gif"></el-option>
      </el-select>
      <el-select v-model="filterSize" placeholder="图片大小" @change="applyFilters">
        <el-option label="所有大小" value=""></el-option>
        <el-option label="小于1MB" value="small"></el-option>
        <el-option label="1MB-5MB" value="medium"></el-option>
        <el-option label="大于5MB" value="large"></el-option>
      </el-select>
      <el-select v-model="sortOrder" placeholder="排序方式" @change="applySort">
        <el-option label="按上传日期升序" value="asc"></el-option>
        <el-option label="按上传日期降序" value="desc"></el-option>
      </el-select>
    </div>

    <!-- 图片列表 -->
    <div v-if="!showRecycleBin" class="image-list-container">
      <el-row :gutter="20" class="image-list">
        <el-col
            v-for="(image, index) in filteredAndSortedImages"
            :key="index"
            :span="24 / imagesPerRow">
          <el-card shadow="hover" class="image-card" @mouseover="handleMouseOver(index)" @mouseout="handleMouseOut(index)">
            <img :src="image.url" class="image-item" @load="handleImageLoad(index)" :class="{'fade-in': imageLoaded[index]}">
            <div class="image-actions">
              <el-button type="text" @click="handlePreview(image)">查看</el-button>
              <el-button type="text" @click="handleDelete(index)">删除</el-button>
            </div>
            <div class="image-name">{{ image.name }}</div>
          </el-card>
        </el-col>
      </el-row>

      <!-- 分页组件 -->
      <div class="pagination-container">
<!--        加提示词-->
        <div>
          <span>
            <el-tag type="success" style="height: 35px;margin-right: 2px">每行图片个数：</el-tag>
          </span>
          <el-select  v-model="imagesPerRow" placeholder="每行图片数" @change="handleImagesPerRowChange">
            <el-option
                v-for="option in imagesPerRowOptions"
                :key="option"
                :label="option"
                :value="option">
            </el-option>
          </el-select>
        </div>

        <el-pagination
            @current-change="handlePageChange"
            :current-page="currentPage"
            :page-size="pageSize"
            layout="prev, pager, next, sizes"
            :page-sizes="pageSizeOptions"
            :total="filteredAndSortedImages.length"
            class="pagination-custom">
        </el-pagination>
      </div>
    </div>

    <!-- 回收站 -->
    <div v-if="showRecycleBin" class="recycle-bin">
      <h3>回收站</h3>
      <el-checkbox-group v-model="selectedImagesForDeletion">
        <el-row :gutter="20">
          <el-col
              v-for="(image, index) in deletedImages"
              :key="index"
              :span="6">
            <el-card shadow="hover" class="image-card">
              <img :src="image.url" class="image-item" @click="handlePreview(image)">
              <div class="image-actions">
                <el-checkbox :label="index">{{ image.name }}</el-checkbox>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </el-checkbox-group>
      <el-button type="danger" @click="handlePermanentDelete">彻底删除</el-button>
    </div>

  </div>
</template>

<script>
export default {
  name: "Imagemanage",
  data() {
    return {
      imageList: [
        { name: 'image1.jpg', url: 'https://via.placeholder.com/150', type: 'jpeg', size: 'small' },
        { name: 'image2.jpg', url: 'https://via.placeholder.com/150', type: 'png', size: 'medium' },
        { name: 'image3.jpg', url: 'https://via.placeholder.com/150', type: 'gif', size: 'large' },
        { name: 'image4.jpg', url: 'https://via.placeholder.com/150' },
        { name: 'image5.jpg', url: 'https://via.placeholder.com/150' },
        { name: 'image6.jpg', url: 'https://via.placeholder.com/150' },
        { name: 'image7.jpg', url: 'https://via.placeholder.com/150' },
        { name: 'image8.jpg', url: 'https://via.placeholder.com/150' },
        { name: 'image9.jpg', url: 'https://via.placeholder.com/150' },
        { name: 'image10.jpg', url: 'https://via.placeholder.com/150' },
        { name: 'image11.jpg', url: 'https://via.placeholder.com/150' },
        { name: 'image12.jpg', url: 'https://via.placeholder.com/150' },
        { name: 'image13.jpg', url: 'https://via.placeholder.com/150' },
        { name: 'image14.jpg', url: 'https://via.placeholder.com/150' },
        { name: 'image15.jpg', url: 'https://via.placeholder.com/150' },
        { name: 'image16.jpg', url: 'https://via.placeholder.com/150' },
        { name: 'image17.jpg', url: 'https://via.placeholder.com/150' },
        { name: 'image18.jpg', url: 'https://via.placeholder.com/150' },
        { name: 'image19.jpg', url: 'https://via.placeholder.com/150' },
        { name: 'image20.jpg', url: 'https://via.placeholder.com/150' }
      ],
      fileList: [],
      dialogUploadVisible: false,
      deletedImages: [],
      selectedImagesForDeletion: [],
      // 新增分页相关变量
      currentPage: 1,
      pageSize: 10,
      pageSizeOptions: [6, 12, 24],
      // 新增显示回收站或图片列表的变量
      showRecycleBin: false,
      // 新增每行图片数控制变量
      imagesPerRow: 6,
      imagesPerRowOptions: [4, 6, 8, 12],
      imageLoaded: [],
      // 新增搜索相关变量
      searchQuery: '',
      // 新增筛选相关变量
      filterType: '',
      filterSize: '',
      sortOrder: ''
    }
  },
  mounted() {
    this.imageLoaded = this.imageList.map(() => false)
  },
  computed: {
    paginatedImages() {
      const start = (this.currentPage - 1) * this.pageSize
      const end = start + this.pageSize
      return this.imageList.slice(start, end)
    },
    // 新增过滤和排序后的图片列表
    filteredAndSortedImages() {
      let filteredImages = this.imageList.filter(image => {
        return (this.searchQuery === '' || image.name.toLowerCase().includes(this.searchQuery.toLowerCase())) &&
               (this.filterType === '' || image.type === this.filterType) &&
               (this.filterSize === '' || image.size === this.filterSize)
      })

      if (this.sortOrder === 'asc') {
        filteredImages.sort((a, b) => new Date(a.uploadDate) - new Date(b.uploadDate))
      } else if (this.sortOrder === 'desc') {
        filteredImages.sort((a, b) => new Date(b.uploadDate) - new Date(a.uploadDate))
      }

      return filteredImages
    }
  },
  methods: {
    handleSuccess(response, file) {
      this.imageList.push({
        name: file.name,
        url: URL.createObjectURL(file.raw),
        type: file.name.split('.').pop(),
        size: file.size < 1024 * 1024 ? 'small' : file.size < 5 * 1024 * 1024 ? 'medium' : 'large',
        uploadDate: new Date().toISOString()
      })
      this.fileList.push(file)
      this.dialogUploadVisible = false
      this.$message.success('上传成功')
    },
    beforeUpload(file) {
      const isImage = file.type.includes('image/')
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isImage) {
        this.$message.error('只能上传图片文件')
      }
      if (!isLt2M) {
        this.$message.error('图片大小不能超过2MB')
      }

      return isImage && isLt2M
    },
    handlePreview(image) {
      this.$alert(`<img src="${image.url}" style="max-width: 100%">`, '图片预览', {
        dangerouslyUseHTMLString: true
      })
    },
    handleDelete(index) {
      this.$confirm('确定删除该图片吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const deletedImage = this.imageList.splice(index, 1)[0]
        this.deletedImages.push(deletedImage)
        this.$message.success('删除成功')
      })
    },
    handleRemove(file, fileList) {
      const index = this.fileList.findIndex(item => item.uid === file.uid)
      if (index !== -1) {
        const deletedImage = this.imageList.splice(index, 1)[0]
        this.deletedImages.push(deletedImage)
        this.fileList.splice(index, 1)
        this.$message.success('删除成功')
      }
    },
    submitUpload() {
      this.$refs.upload.submit()
    },
    handlePermanentDelete() {
      this.$confirm('确定彻底删除选中的图片吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.selectedImagesForDeletion.sort((a, b) => b - a).forEach(index => {
          this.deletedImages.splice(index, 1)
        })
        this.selectedImagesForDeletion = []
        this.$message.success('彻底删除成功')
      })
    },
    // 新增分页处理方法
    handlePageChange(page) {
      this.currentPage = page
    },
    // 新增切换视图的方法
    toggleView() {
      this.showRecycleBin = !this.showRecycleBin
    },
    // 新增每行图片数变化处理方法
    handleImagesPerRowChange(value) {
      this.imagesPerRow = value
    },
    handleMouseOver(index) {
      // 添加鼠标悬停效果
      this.$refs[`imageCard${index}`][0].style.transform = 'scale(1.05)'
    },
    handleMouseOut(index) {
      // 添加鼠标移出效果
      this.$refs[`imageCard${index}`][0].style.transform = 'scale(1)'
    },
    handleImageLoad(index) {
      // 添加图片加载淡入效果
      this.$set(this.imageLoaded, index, true)
    },
    // 新增搜索处理方法
    handleSearch() {
      this.currentPage = 1
    },
    // 新增筛选处理方法
    applyFilters() {
      this.currentPage = 1
    },
    // 新增排序处理方法
    applySort() {
      this.currentPage = 1
    }
  }
}
</script>

<style scoped>
.image-manage {
  padding: 20px;
  background-color: #f5f7fa; /* 更改背景色为柔和的浅灰色 */
  font-family: 'Roboto', sans-serif; /* 更改字体为现代感的无衬线字体 */
}

.button-container {
  display: flex;
  justify-content: space-between; /* 修改: 将按钮容器改为两端对齐 */
  align-items: center;
  margin-bottom: 20px;
}

.custom-button {
  font-size: 14px; /* 更改字体大小 */
  color: #fff; /* 更改字体颜色 */
  background-color: #6200ea; /* 更改按钮背景色为淡一点的颜色 */
  border-color: #6200ea; /* 更改按钮边框色 */
  transition: background-color 0.3s, transform 0.2s; /* 添加过渡效果 */
}

.custom-button:hover {
  background-color: #3700b3; /* 更改按钮悬停背景色为稍深的蓝色 */
  transform: scale(1.03); /* 添加悬停缩放效果 */
}

/* 添加搜索框样式 */
.search-container {
  display: flex;
  align-items: center;
}

.search-input {
  width: 50%; /* 修改: 将搜索框宽度设置为50% */
  height: 40px; /* 增加高度 */
  border: 1px solid #ccc; /* 添加淡雅的边框颜色 */
  border-radius: 5px; /* 添加圆角效果 */
  transition: opacity 0.3s; /* 添加过渡效果 */
  color: #999; /* 更改输入提示文字颜色 */
}

.search-button {
  margin-left: 10px; /* 修改: 增加间距 */
  height: 40px; /* 与搜索框高度一致 */
  background-color: #6200ea; /* 更改按钮背景色为淡一点的颜色 */
  border-color: #6200ea; /* 更改按钮边框色 */
  color: #fff; /* 更改字体颜色 */
  font-size: 14px; /* 更改字体大小 */
  transition: background-color 0.3s, transform 0.2s; /* 添加过渡效果 */
}

.search-button:hover {
  background-color: #3700b3; /* 更改按钮悬停背景色为稍深的蓝色 */
  transform: scale(1.03); /* 添加悬停缩放效果 */
}

/* 添加筛选条件栏样式 */
.filter-container {
  margin-bottom: 20px;
}

.filter-container .el-select {
  margin-right: 10px;
  border: 1px solid #f5f5dc; /* 添加淡雅的边框颜色 */
  border-radius: 5px; /* 添加圆角效果 */
}

.upload-demo {
  margin-bottom: 20px;
}

.image-list-container {
  margin-top: 20px;
}

.image-list {
  margin-top: 20px;
}

.image-item {
  width: 100%;
  height: 150px;
  object-fit: cover;
  cursor: pointer;
  opacity: 0; /* 初始透明度 */
  transition: opacity 0.5s ease-in-out; /* 淡入效果 */
}

.image-item.fade-in {
  opacity: 1; /* 完全显示 */
}

.image-actions {
  margin-top: 10px;
  text-align: center;
  font-size: 14px; /* 更改字体大小 */
  color: #333; /* 更改字体颜色 */
}

.image-card {
  transition: transform 0.2s;
  border-radius: 5px; /* 添加圆角效果 */
}

.image-card:hover {
  transform: scale(1.05);
}

/* 添加图片名称样式 */
.image-name {
  margin-top: 10px;
  text-align: center;
  font-size: 14px;
  color: #000; /* 更改图片名称字体颜色为黑色 */
  font-family: 'Georgia', serif; /* 更改图片名称字体为简洁的衬线字体 */
}

.recycle-bin {
  margin-top: 40px;
  padding: 20px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  background-color: #f5f7fa;
}

.recycle-bin h3 {
  margin-bottom: 20px;
  font-size: 18px; /* 更改字体大小 */
  color: #333; /* 更改字体颜色 */
}

/* 新增分页按钮的自定义样式 */
.pagination-custom .el-pager li {
  background-color: #f0f0f0;
  border-radius: 50%;
  margin: 0 5px;
  transition: background-color 0.3s;
}

.pagination-custom .el-pager li.active {
  background-color: #6200ea;
  color: #fff;
}

.pagination-custom .el-pager li:hover {
  background-color: #3700b3;
}

.pagination-custom .btn-prev,
.pagination-custom .btn-next {
  background-color: #f0f0f0;
  border-radius: 50%;
  margin: 0 5px;
  transition: background-color 0.3s;
}

.pagination-custom .btn-prev:hover,
.pagination-custom .btn-next:hover {
  background-color: #3700b3;
}

/* 新增每行图片数选择框的样式 */
.pagination-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
}

/* 添加鼠标悬停在操作按钮上的动态反馈 */
.image-actions .el-button {
  transition: transform 0.2s, color 0.2s;
}

.image-actions .el-button:hover {
  transform: scale(1.05);
  color: #6200ea;
}
</style>